import React, { Component } from 'react'
import { View, Switch, Text, StyleSheet, TouchableOpacity,Image } from 'react-native'
import { inject, observer } from 'mobx-react'
import { Camera } from 'expo-camera'
import * as Permissions from 'expo-permissions'

interface Props {
  store?: any
}
interface State {

}

const styles = StyleSheet.create({
  container: {
    paddingTop: 40,
    flexDirection: 'row'
  }
})

@inject('store')
@observer
class More extends Component<Props, State> {

  camera = null

  state = {
    hasPermissions: null,
    isTakePic: false,
    type: Camera.Constants.Type.back,
    picUrl:''
  }

  async componentDidMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA)
    this.setState({
      hasPermissions: status === 'granted'
    })

  }

   takePicture = async () => {
    let result = await this.camera.takePictureAsync()
    console.log(result);
    this.setState({
      picUrl:result.uri,
      isTakePic:false
    })
  }

  render() {
    return (
      <>

        {
          this.state.isTakePic ?
            <Camera style={{ flex: 1 }} type={this.state.type}
            ref={(ref: any) => {
              this.camera = ref;
            }}
            >
              <TouchableOpacity onPress={this.takePicture} >
                <View style={{
                  marginLeft: 20,
                  marginTop: 50,
                  width: 100,
                  height: 50,
                  backgroundColor: "orange",
                  justifyContent: "center",
                  alignItems: "center"
                }}>
                  <Text>拍照</Text>
                </View>
              </TouchableOpacity>

            </Camera>
            :
            <View>
              <View style={styles.container}>

                <View style={{
                  height: 30,
                  justifyContent: "center",
                  alignItems: "center"
                }}>
                  <Text>是否显示地图：</Text>
                </View>

                <Switch value={this.props.store.isShow} onValueChange={(value) => {
                  this.props.store.setVisible(value)
                }}></Switch>
              </View>


              <TouchableOpacity onPress={() => {
                this.setState({
                  isTakePic: true
                })
              }}>
                <View style={{
                  width: 100,
                  height: 40,
                  backgroundColor: 'orange',
                  justifyContent: "center",
                  alignItems: "center",
                }}
                >
                  <Text style={{ color: 'white' }}>拍照</Text>
                </View>

              </TouchableOpacity>

              <Image
              style={{
                width:200,
                height:200
              }}
              source={{uri:this.state.picUrl}}>
              </Image>
            </View>

        }
      </>
    )
  }
}

export default More;